<template>
	<view>
		<view class="content">
			<view class="top">
				<text>润华商厦/1单元/1001</text>
				<text>已完成</text>
			</view>
			<view class="info">
				<view>
					<text class="text-overflow">下水道堵塞</text>
				</view>
				<view>
					<text class="text-overflow">下水道堵塞安居房噶几风光大嫁鼓风机爱好广泛大姐火锅发光飞碟好尬凤凰股份哈给对方</text>
				</view>
			</view>
			<view class="img">
				<image mode="aspectFit" :src="src" @tap="enlargeImage"></image>
			</view>
			<view v-show="img" class="enlarge-image">
				<view class="close"><uni-icons @click="close" :size="40" class="uni-icon-wrapper" color="#f1f1f1" type="closeempty" /></view>
				<view class="image">
					<image style="width: 100%;" mode="widthFix" :src="src"></image>
				</view>
			</view>
			<view>
				<text class="title">报修时间：</text>
				<text>2019-12-12</text>
			</view>
		</view>
		<view class="form">
			<view class="title">维修内容</view>
			<view style="color: #666;padding-left: 20rpx;">
				<view class="text-overflow">
					13213213213213213121gbjdfgkdjshgfksdhgkhsghsgdhsgsggfjahsgfdagfjgfhga
				</view>
			</view>
			<view class="title">维修图片</view>
			<view class="img" style="margin-top: 20rpx;padding-left: 20rpx;">
				<image style="width:200rpx;height: 200rpx;" @tap="enlargeImage" src="../../static/test.jpg"></image>
			</view>
			<view class="title">维修时间</view>
			<view style="color: #666;padding-left: 20rpx;">
				2019-12-12
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh', new Date())
		},
		data() {
			return {
				src: '../../static/test.jpg',
				img: false
			}
		},
		methods: {
			enlargeImage: function(e) {
				this.img = true
			},
			close (e) {
				this.img = false
			},
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
	}
	
	view {
		font-size: 28rpx;
		line-height: inherit
	}
	.top {
		border-bottom: 1px #efeff4 solid;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}
	.content {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	.item {
		background-color: #FFFFFF;
		margin-top: 1px;
		padding: 30rpx;
	}
	.item .title{
		margin-right: 40rpx;
	}
	.form {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	/* textarea */
	.uni-textarea{
		width:100%;
	}
	.uni-textarea textarea{
		width:96%;
		padding:18upx 2%;
		line-height:1.6;
		font-size:28upx;
		height:150upx;
	}
	.content .img {
		margin-top: 20rpx;
	}
	.content .img image {
		width: 200rpx;
		height: 200rpx;
	}
	.enlarge-image {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top:0;
		z-index: 999;
		overflow: hidden;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
	}
	.close {
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.enlarge-image .image {
		position: absolute;
		top: 20%;
		left: 0;
	}
	.form .img image{
		margin-right: 30rpx;
	}
	.text-overflow {
		width: 100%;
		/*如下为超出隐藏显示为省略号的核心代码*/
		text-overflow: ellipsis;    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		word-wrap:break-word;
	}
	.info {
		padding-top: 20rpx;
	}
</style>
